<template>
  <basic-container>
    <avue-form
      ref="form"
      :option="option"
      v-model="form"
      :upload-before="uploadBefore"
      :upload-after="uploadAfter"
    >
      <template #hnyUpload>
        <hnyUpload :action="action" title="点击上传图片" tip="上传图片提示文案"></hnyUpload>
      </template>
      <template #tabs>
        <el-tabs v-model="activeName">
          <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
          <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
          <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
          <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
        </el-tabs>
      </template>
      <template #alert>
        <el-alert title="Success alert" type="success" show-icon />
        <el-alert title="Info alert" type="info" show-icon />
        <el-alert title="Warning alert" type="warning" show-icon />
        <el-alert title="Error alert" type="error" show-icon />
      </template>
      <template #bread>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>homepage</el-breadcrumb-item>
          <el-breadcrumb-item>promotion management </el-breadcrumb-item>
          <el-breadcrumb-item>promotion list</el-breadcrumb-item>
          <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
        </el-breadcrumb>
      </template>
    </avue-form>
    <el-button plain @click="dialogVisible = true"> 打开dialog </el-button>
    <el-button plain @click="openMsgbox"> 打开msgbox </el-button>

    <el-dialog v-model="dialogVisible" title="新增form表单" width="1000">
      <avue-form
        ref="form"
        :option="{ ...option, column: [option.column[0], option.column[1]] }"
        v-model="form"
        :upload-before="uploadBefore"
        :upload-after="uploadAfter"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="info" @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </basic-container>
</template>

<script>
import { deployUpload } from '@/api/flow/flow';
import { flowCategory } from '@/utils/flow';
import common from '@/option/form-common.js';

export default {
  data() {
    return {
      activeName: 'first',
      dialogVisible: false,
      form: {
        flowCategory: '',
        tenantId: '',
        flowFile: [],
        file: {},
      },
      // headers: {
      //   Authorization:
      //     'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOiJzeXNfdXNlcjoxIiwicm5TdHIiOiJ6ZTRRVmxnNHJDOUx0eVB1c1Zpd055SzA1ejl2dWJBSSIsInVzZXJJZCI6MX0.1_wbxzH2MKUs0_fztW5t8quraDibIDQD7jErqqWaVkQ',
      // },
      action: 'https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15',
      option: {
        ...common,
        labelWidth: 120,
        menuBtn: false,
        column: [
          {
            label: '输入框',
            prop: 'input',
            span: 8,
            row: true
          },
          {
            label: '选择器',
            prop: 'select',
            type: 'select',
            span: 8,
            dicData: [
              {
                label: '选择框1',
                value: 1,
              },
              {
                label: '选择框2',
                value: 2,
              },
              {
                label: '选择框1',
                value: 3,
                disabled: true,
              },
              {
                label: '选择框2',
                value: 4,
                disabled: true,
              },
            ],
            row: true
          },
          {
            label: '级联选择器',
            prop: 'cascader',
            type: 'cascader',
            dicData: [{
              value: 'zhinan',
              label: '指南',
              children: [{
                value: 'shejiyuanze',
                label: '设计原则',
                children: [{
                  value: 'yizhi',
                  label: '一致'
                }, {
                  value: 'fankui',
                  label: '反馈'
                }]
              }]
            }],
            row: true,
            span: 8
          },
          {
            label: '单选框测试',
            prop: 'flowMode',
            type: 'radio',
            dicData: [
              {
                label: '选择框1',
                value: 1,
              },
              {
                label: '选择框2',
                value: 2,
              },
              {
                label: '选择框1',
                value: 1,
                disabled: true,
              },
              {
                label: '选择框2',
                value: 2,
                disabled: true,
              },
            ],
            value: 1,
            row: true,
            span: 12,
            rules: [
              {
                required: true,
                message: '请选择流程模式',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '单选框按钮式',
            prop: 'flowModeButton',
            type: 'radio',
            button: true,
            dicData: [
              {
                label: '通用流程',
                value: 1,
              },
              {
                label: '定制流程',
                value: 2,
              },
              {
                label: '按钮3',
                value: 3,
              },
              {
                label: '按钮4',
                value: 4,
              },
            ],
            value: 1,
            row: true,
            span: 12,
            rules: [
              {
                required: true,
                message: '请选择流程模式',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '按钮式禁用',
            prop: 'flowModeButtonDisable',
            type: 'radio',
            button: true,
            dicData: [
              {
                label: '通用流程',
                value: 3,
                disabled: true,
              },
              {
                label: '定制流程',
                value: 4,
                disabled: true,
              },
            ],
            value: 4,
            row: true,
            span: 12,
          },
          {
            label: '多选框',
            prop: 'authorizedGrantTypes',
            type: 'checkbox',
            value: 'refresh_token,password',
            all: true,
            dicData: [
              {
                label: '多选项1',
                value: 'refresh_token',
              },
              {
                label: '多选项2',
                value: 'password',
              },
              {
                label: '多选项3',
                value: 'authorization_code',
              },
            ],
            rules: [
              {
                required: true,
                message: '请输入授权类型',
                trigger: 'blur',
              },
            ],
            row: true,
            span: 12,
          },
          {
            label: '多选框禁用',
            prop: 'authorizedGrantTypesDisable',
            type: 'checkbox',
            value: 'refresh_token,password',
            dicData: [
              {
                label: '多选项1',
                value: 'refresh_token',
                disabled: true,
              },
              {
                label: '多选项2',
                value: 'password',
                disabled: true,
              },
              {
                label: '多选项3',
                value: 'authorization_code',
                disabled: true,
              },
            ],
            row: true,
            span: 12,
          },
          {
            label: '开关按钮',
            prop: 'isCovered',
            type: 'switch',
            dicData: [
              {
                label: '否',
                value: 0,
              },
              {
                label: '是',
                value: 1,
              },
            ],
            value: 0,
          },
          {
            label: '图片上传',
            prop: 'hnyUpload',
            formslot: true,
            span: 24,
          },
          {
            label: '选项卡',
            prop: 'tabs',
            formslot: true,
            span: 16,
          },
          {
            label: 'alert',
            prop: 'alert',
            formslot: true,
            span: 16,
          },
          {
            label: '面包屑',
            prop: 'bread',
            formslot: true,
            span: 16,
          },
        ],
      },
    };
  },
  watch: {
    'form.flowMode'() {
      this.$refs.form.option.column.filter(item => {
        if (item.prop === 'tenantId') {
          item.display = this.form.flowMode === 2;
        }
      });
    },
  },
  methods: {
    openMsgbox() {
      this.$alert(
        '我是文案限制长度，我是文案限制长度，我是文案限制长度，我是文案限制长度，我是文案限制长度，我是文案限制长度，我是文案限制长度，我是文案限制长度，我是文案限制长度',
        'Warning',
        {
          confirmButtonText: 'OK',
          cancelButtonText: 'Cancel',
        }
      ).then(() => {
        ElMessage({
          type: 'success',
          message: 'Delete completed',
        });
      });
    },
    uploadBefore(file, done) {
      this.$message.success('部署开始');
      this.file = file;
      done();
    },
    uploadAfter(res, done, loading) {
      if (!this.form.flowCategory) {
        this.$message.warning('清先选择流程类型');
        loading();
        return false;
      }
      if (this.form.flowMode === 2 && !this.form.tenantId) {
        this.$message.warning('清先选择对应租户');
        loading();
        return false;
      }
      if (res.success) {
        deployUpload(
          flowCategory(this.form.flowCategory),
          this.form.tenantId ? this.form.tenantId.join(',') : '',
          [this.file]
        ).then(res => {
          const data = res.data;
          if (data.success) {
            done();
          } else {
            this.$message.error(data.msg);
            loading();
          }
        });
      } else {
        this.$message.warning('请上传 bpmn20.xml 标准格式文件');
        loading();
        return false;
      }
    },
  },
};
</script>
